<template>
	<view>
		<view class="header">
			<view class="flex-row circleTabs">
				
				<view class="circle-item" :class="{ 'circle-item-ac': 0 === circle_id }"
					@click="init(0)" >
					<view class="circle-item-add-icon" style="background: #999;">
				
							<uni-icons custom-prefix="iconfont" type="icon-quanbu" size="22"
								color="#ffffff"></uni-icons>
				
						<!-- <image :src="it.logo" mode="aspectFill" class="circle-img" /> -->
					</view>
					<view class="circle-text ellipsis">全部</view>
					<!-- <view class="triangle" :class="{ active: it.id === circle_id }"></view> -->
				</view>
				
				<view class="circle-item" :class="{ 'circle-item-ac': it.id === circle_id }"
					@click="init(it.id)" v-for="it in tab" :key="it.id">
					<view class="circle-item-add-icon">
						<image :src="it.logo" mode="aspectFill" class="circle-img" />
					</view>
					<view class="circle-text ellipsis">{{it.name || ''}}</view>
					<!-- <view class="triangle" :class="{ active: it.id === circle_id }"></view> -->
				</view>
				<!-- <view class="circle-item-add" @click="toFindInterest">
					<view class="circle-item-add-icon">
						<view class="circle-item-add-icon-item">
							<uni-icons custom-prefix="iconfont" type="icon-jiahao" size="17"
								color="#ffffff"></uni-icons>
						</view>
					</view>
					<view class="circle-text">找兴趣</view>
					<view class="triangle"></view>
				</view> -->
			</view>
		</view>
		<view class="tab">
			<view class="tab-list" @click="setCurrent(1)">
				<view :class="current === 1 ? 'ac' : ''">
					名片
				</view>
			</view>
			<!-- <view class="tab-list" @click="setCurrent(4)">
				<view :class="current === 4 ? 'ac' : ''">
					日志
				</view>
			</view> -->
			<view class="tab-list" @click="setCurrent(2)">
				<view :class="current === 2 ? 'ac' : ''">
					视频
				</view>
			</view>
			<view class="tab-list" @click="setCurrent(3)">
				<view :class="current === 3 ? 'ac' : ''">
					商品
				</view>
			</view>
		</view>
		
		<Card v-if="current === 1" :circle_id="circle_id"/>
		<Curriculum v-if="current === 2" :circle_id="circle_id"/>
		<productsVue v-if="current === 3" :circle_id="circle_id"/>
		
	
	</view>
</template>

<script>
	import Card from './card/card.vue'
	import Curriculum from './curriculum/curriculum.vue'
	import productsVue from './products/products.vue';
	import {
		recently_visited_circle,
		circle_permission
	} from '@/common/http/api.js'
	export default {
		components:{
			Card,
			Curriculum,
			productsVue
		},
		data() {
			return {
				current: 1,
				tab: [],
				circle_id: '',
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.init()
		},
		methods:{
			setCurrent(e){
				this.current = e;
			},
			init(id){
				this.loading = true
				let data = {}
				
				if(id) {
					data['id'] = id
				}
	
				this.creator = 1
				recently_visited_circle(data).then(res=>{
					
					if(!id) {
						this.tab = res.data
						this.circle_id = 0
					} else {
						this.circle_id = id
					}
					this.getPermission()
				})
				.catch(e => {
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.tab {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		margin-bottom: 45rpx;
		.tab-list {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			view {
				height: 100%;
				font-family: PingFang;
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
				display: flex;
				align-items: center;
			}
			.ac {
				font-family: PingFang;
				font-weight: 800;
				font-size: 30rpx;
				color: #12B475;
				position: relative;
			}
			.ac::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				margin: auto;
				width: 50rpx;
				height: 6rpx;
				background: #12B475;
			}
		}
	}
	.setting {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		view {
			font-family: PingFang;
			font-weight: 500;
			font-size: 30rpx;
			color: #12B475;
			display: flex;
			align-items: center;
			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 5rpx;
			}
		}
	}
	.btns {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 121rpx;
		background: #12B475;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	
	.header {
		width: 100%;
		// background-color: #242232;
		// position: sticky;
		// top: 0;
		// left: 0;
		// z-index: 9;
		padding-top: 30rpx;
		.circle-item {
			margin-right: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		
			.circle-img {
				width: 90rpx;
				height: 90rpx;
				// background-color: #e9e9e9;
				border-radius: 10rpx;
			}
		
			.circle-text {
				width: 100rpx;
				font-size: 20rpx;
				color: #000;
				text-align: center;
				margin: 10rpx 0;
		
			}
		}
		
		.circle-item-add-icon {
			width: 102rpx;
			height: 102rpx;
			border-radius: 20rpx;
			// background-color: #33303f;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 6rpx;
		
			&>view,
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx !important;
			}
		}
		
		.circle-text {
			font-size: 20rpx;
			color: #000;
			text-align: center;
			margin: 10rpx 0;
		}
		
		.circle-item:first-child {
			margin-left: 20rpx;
		}
		.circleTabs {
			overflow-x: scroll;
		}
		
		.search-box {
			background: #292639;
			padding-top: 6rpx;
		}
		
		.circle-item {
			box-sizing: border-box;
		}
		
		
		.circle-item-add {
			display: flex;
			flex-direction: column;
			align-items: center;
		
		
			.circle-text {
				font-size: 20rpx;
				color: #000;
				text-align: center;
				margin-bottom: 10rpx;
			}
		}
		
		.circle-item-ac {
			.circle-item-add-icon {
				background-color: #F4DEBF !important;
				border-radius: 20rpx;
			}
		
		}
		
		.circle-item-add-icon-item {
			background-color: #33303f;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.triangle {
			width: 0;
			height: 0;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-bottom: 15rpx solid #242232;
			/* 控制三角形高度和颜色 */
		
			&.active {
				border-bottom-color: #F6F7F8;
			}
		}
	}
</style>
